<script setup lang='ts'>
import { useGetMemberRecord } from '@fl/api/member-api/member'
import { computed, ref } from 'vue'

import RightTable from './right-table.vue'

// const { push } = useRouter()

const total = ref(0)
const state = {
    page: 1,
    size: 10,
}
const pages = ref({ ...state })
const params = computed(() => pages.value)
const { data, isLoading, refetch } = useGetMemberRecord(params)

const records = ref([])
const activeName = ref(0)

const tabs = computed(() => {
    return ['严选会员权益介绍']
    // return hasRecord.value ? ['缴费记录', '严选会员权益介绍'] : ['严选会员权益介绍']
})

watchEffect(() => {
    if (data.value) {
        records.value = data.value.records
        total.value = data.value.total
    }
})

function handleClick(tab: any) {
    if (tab === 0) {
        refetch()
    }
}
</script>

<template>
    <el-tabs v-model="activeName"
             v-loading.fullscreen.lock="isLoading"
             class="demo-tabs"
             @tab-change="handleClick"
    >
        <el-tab-pane v-for="(tab, index) in tabs"
                     :key="index"
                     :label="tab"
                     :name="index"
        />
    </el-tabs>

    <div class="p-20 pt-10 bg-#fff h-full w-full">
        <RightTable />
    </div>
</template>

<style lang="less" scoped>
.content {
    p {
        padding-left: 20px;
    }

    .agree-title {
        font-weight: 600;
        padding-left: 0;
        margin-top: 10px;
    }
}

.table-sty {
    :deep(.vxe-header--row) {
        background: #333;
        color: #fff;
    }
}

.btn-sty {
    padding: 8px 50px;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(to right, #8086ad, #1e2244);
    margin-bottom: 30px;
    margin-top: 50px;
}
</style>

<style>
.dialog-sty {
    padding-top: 20px !important;
}

.dialog-sty .el-dialog__header {
    display: none;
}
</style>
